{% extends 'frontend/base.html' %}
{% load i18n %}
{% load app_icon %}
{% block content %}
    <div class="row show-center">
        <div class="col-3">
            <div class="show-left">
                <div class="port">
                    <h2>&nbsp;&nbsp;&nbsp;{% trans "Port services" %}</h2>
                </div>
                <div class="item">
                    <h3>&nbsp;&nbsp;{% trans "Countries" %}</h3>
                    <div class="list-group">
                        {% for app in statistics.countrys %}
                            <a href="#" class="list-group-item list-group-item-action"
                               data-search="country='{{ app.key }}'">{{ app.key }} <span
                                    class="badge badge-primary badge-pill float-right">{{ app.doc_count }}</span></a>
                        {% endfor %}
                    </div>
                </div>

                <div class="item">
                    <h3>&nbsp;&nbsp;{% trans "Services" %}</h3>
                    <div class="list-group">
                        {% for app in statistics.names %}
                            <a href="#" class="list-group-item list-group-item-action"
                               data-search="service='{{ app.key }}'">{{ app.key }} <span
                                    class="badge badge-danger badge-pill float-right">{{ app.doc_count }}</span></a>
                        {% endfor %}
                    </div>
                </div>

                <div class="item">
                    <h3>&nbsp;&nbsp;{% trans "Ports" %}</h3>
                    <div class="list-group">
                        {% for app in statistics.ports %}
                            <a href="#" class="list-group-item list-group-item-action"
                               data-search="port='{{ app.key }}'">{{ app.key }} <span
                                    class="badge badge-info badge-pill float-right">{{ app.doc_count }}</span></a>
                        {% endfor %}

                    </div>
                </div>

                <div class="item">
                    <h3>&nbsp;&nbsp;{% trans "builtwith" %}</h3>
                    <div class="list-group">
                        {% for app in statistics.apps %}
                            <a href="#" class="list-group-item list-group-item-action"
                               data-search="app='{{ app.key }}'">{{ app.key }} <span
                                    class="badge badge-warning badge-pill float-right">{{ app.doc_count }}</span></a>
                        {% endfor %}
                    </div>
                </div>

            </div>
        </div>
        <div class="col-9">
            <div class="show-right">
                <div class="find col-10">
                    <div class="form-group">
                        <div class="input-group">
                            <form action="" method="get" style="width:100%;">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               placeholder="title = '302' && url = '*.qq.com'"
                                               aria-label="Recipient's username" name="q" id="recent-search"
                                               value="{% for item in keyword %}{{ item.1 }}='{{ item.2 }}'  {% endfor %}">
                                        <div class="input-group-append">
                                            <button class="btn btn-sm btn-primary" type="submit">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="words">
                    <p>
                        {% for item in keyword %}
                            <div class="badge badge-primary">{{ item.1 }}="{{ item.2 }}" <i class="icon-close words-close"></i></div>
                        {% endfor %}
                    </p>
                    <p class="text-muted">{% blocktrans %}Found {{ count }} results,took {{ second }}s{% endblocktrans %}</p>
                </div>


                <div class="show-list">
                    {% for data in datas %}

                        <div class="list-item">
                            <div class="card-body">
                                {% if data.doc_type == "ips" %}
                                    <div class="card-body-left">
                                        <h4 class="card-title"><a
                                                href="{% url 'detail' data.id %}">{{ data.target }}</a></h4>
                                        <div class="card-text">
                                        <p class="text-muted">
                                            {% for info in data.info_tags %}
                                                <div class="badge badge-outline-info">{{ info }}</div>
                                            {% endfor %}
                                        {% if data.bugs %}
                                            <label class="badge badge-danger">{% trans "warning" %}</label>
                                        {% endif %}
                                        </p>

                                        <p class="text-muted">
                                            {% if data.location %}
                                                <span
                                                        class="flag-icon flag-icon-{{ data.location.country_id | lower }}"></span>
                                                {{ data.location.country }}
                                                {{ data.location.region }}&nbsp;
                                            {% endif %}
                                            {% for pp in data.proper %}
                                                <span class="zichan">
                                                    <l class="icon-cursor"></l>
                                                    {{ pp.0 }}</span>
                                            {% endfor %}
                                        </p>
                                        <p class="text-muted"><span><i class="icon-clock"></i> {{ data.published_from }}</span>
                                        </p>
                                        </div>
                                    </div>
                                    <pre>{{ data.infos }}</pre>
                                {% elif data.doc_type == "domains" %}
                                    <div class="card-body-left">
                                        <h4 class="card-title"><a href="{% url 'detail' data.id %}"
                                                                  class="domain-inline">{{ data.target }}</a></h4>
                                        <div class="card-text">
                                        <p class="text-muted">
                                            {% for app in data.app %}
                                                {{ app|app_icon|safe }}
                                            {% endfor %}
                                            {% if data.bugs %}
                                                <label class="badge badge-danger">{% trans "warning" %}</label>
                                            {% endif %}
                                        </p>
                                        <p class="text-muted">
                                            {% if data.location %}
                                                <span
                                                        class="flag-icon flag-icon-{{ data.location.country_id | lower }}"></span>
                                                {{ data.location.country }}
                                                {{ data.location.region }}&nbsp;
                                            {% endif %}
                                            {% if data.proper %}
                                                <span class="zichan">
                                                {% for pp in data.proper %}
                                                    <l class="icon-cursor"></l>
                                                    {{ pp.0 }}</span>
                                                {% endfor %}
                                            {% endif %}
                                        </p>
                                        <p class="text-muted"><span><i class="icon-link"></i> {{ data.url }}</span><br/>
                                            <span><i class="icon-clock"></i> {{ data.published_from }}</span>
                                        </p>
                                        </div>
                                    </div>
                                    <pre>{{ data.headers }}<br/><br/>{{ data.body }}
                                </pre>
                                {% endif %}
                            </div>
                        <div style="clear: both"></div>
                        </div>
                    {% endfor %}

                </div>

                <nav style="margin:40px ;">
                    <ul class="pagination rounded">
                        <li class="page-item"><a class="page-link"
                                                 href="/?p={{ pagination.pre }}{{ pagination.keyword }}"><i
                                class="icon-arrow-left"></i></a></li>
                        {% for i in pagination.paginations %}
                            <li class="page-item {% if pagination.current == i %}active{% endif %}"><a class="page-link"
                                                                                                       href="/?p={{ i }}{{ pagination.keyword }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        <li class="page-item"><a class="page-link"
                                                 href="/?p={{ pagination.next }}{{ pagination.keyword }}"><i
                                class="icon-arrow-right"></i></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
{% endblock %}
{% block extrascript %}
    <script src="/static/js/my.js"></script>
{% endblock %}